<template>
  <model-dialog
    dialogTitle="编辑工具栏"
    :showModal="editorOpen"
    @closeModel="openedit"
    class="model-dialog max"
  >
    <n-scrollbar style="max-height: calc(90vh - 200px)">
      <div class="editor-pop-view">
        <div class="chid-view">
          <div class="title">一级工具栏</div>
          <div
            v-for="item in firstList"
            :key="item.id"
            class="parent-view"
            @click="activeItemFun(item)"
          >
            <div
              class="border-view"
              :class="activeFirstItem.id === item.id ? 'active' : ''"
            ></div>
            <icons
              class="right-icon"
              :class="activeFirstItem.id === item.id ? 'active' : ''"
              name="right"
            />
            <div class="top">
              <div class="type-view">{{ item.firstType }}</div>
              <span>排序</span>
              <n-input
                type="text"
                :allow-input="onlyAllowNumber"
                v-model:value="item.firstSort"
                placeholder="排序"
              />
              <span>显示</span>
              <n-switch v-model:value="item.firstIsVisble" />
            </div>
            <div class="sub-title">图片导入<span>建议上传尺寸90*90</span></div>
            <div class="img-upload">
              <div class="img-view">
                <n-upload
                  list-type="image-card"
                  :default-file-list="item.img"
                  :custom-request="customRequest"
                  accept="image/png, image/jpeg,image/webp"
                  :max="1"
                >
                  点击上传
                </n-upload>
              </div>
              <div v-if="activeFirstItem.id === item.id" class="tools-view">
                <n-button
                  class="btn"
                  type="success"
                  @click="InsertPropertyBindFun(0, item)"
                >
                  保存
                </n-button>
                <n-button
                  class="btn delete"
                  type="error"
                  @click="deleteFun(true, 0, item.id)"
                >
                  删除
                </n-button>
              </div>
            </div>
          </div>
          <div class="parent-view">
            <div class="add-view" @click="openAddWin(true, '0')">
              <icons class="add-icon" name="tianjia" />
            </div>
          </div>
          <div class="pages-view">
            <n-pagination
              v-model:page="firstPage"
              :page-sizes="[2]"
              :item-count="firstArr.length"
              :page-slot="7"
            />
          </div>
        </div>
        <div class="chid-view">
          <div class="title">二级工具栏</div>
          <div
            v-for="item in secondList"
            :key="item.id"
            class="parent-view"
            @mousedown="secondActive(item)"
          >
            <div
              class="border-view"
              :class="activeChildId === item.id ? 'active' : ''"
            ></div>
            <div class="top">
              <div class="type-view">{{ item.secondType }}</div>
              <span>排序</span>
              <n-input
                type="text"
                :allow-input="onlyAllowNumber"
                v-model:value="item.secondSort"
                placeholder="排序"
              />
              <span>显示</span>
              <n-switch v-model:value="item.secondIsVisble" />
              <div class="seting-view">
                <div class="btn" @click="GetPropertyNameFun(item.secondType)">
                  设置绑定数据
                </div>
              </div>
            </div>
            <div class="sub-title">图片导入<span>建议上传尺寸90*90</span></div>
            <div class="img-upload">
              <div class="img-view">
                <n-upload
                  list-type="image-card"
                  :default-file-list="item.img"
                  :custom-request="customRequest1"
                  accept="image/png, image/jpeg,image/webp"
                  :max="1"
                >
                  点击上传
                </n-upload>
              </div>
              <div v-if="activeChildId === item.id" class="tools-view">
                <n-button
                  class="btn"
                  type="success"
                  @click="InsertPropertyBindFun(1, firstData)"
                >
                  保存
                </n-button>
                <n-button
                  class="btn delete"
                  type="error"
                  @click="deleteFun(true, 1, item.id)"
                >
                  删除
                </n-button>
              </div>
            </div>
          </div>
          <div class="parent-view">
            <div class="add-view" @click="openAddWin(true, '1')">
              <icons class="add-icon" name="tianjia" />
            </div>
          </div>
          <div class="pages-view">
            <n-pagination
              v-model:page="secondPage"
              :page-sizes="[2]"
              :item-count="secondArr.length"
              :page-slot="7"
            />
          </div>
        </div>
      </div>
    </n-scrollbar>
  </model-dialog>
  <model-dialog
    :dialogTitle="firstData && !firstData.id ? '添加一级工具' : '添加二级工具'"
    :showModal="editorAddOpen"
    @closeModel="openAddWin"
    class="edit-win"
  >
    <div class="editor-pop-view min">
      <div v-if="firstData && !firstData.id" class="chid-view">
        <div class="parent-view">
          <div class="top">
            <n-select
              class="select"
              v-model:value="firstData.firstType"
              placeholder="选择类型"
              :options="firstTypeList"
            />
            <span>排序</span>
            <n-input
              type="text"
              :allow-input="onlyAllowNumber"
              v-model:value="firstData.firstSort"
              placeholder="排序"
            />
            <span>显示</span>
            <n-switch v-model:value="firstData.firstIsVisble" />
          </div>
          <div class="sub-title">图片导入<span>建议上传尺寸90*90</span></div>
          <div class="img-upload">
            <div class="img-view">
              <n-upload
                list-type="image-card"
                :custom-request="customRequest"
                accept="image/png, image/jpeg,image/webp"
                :max="1"
              >
                点击上传
              </n-upload>
            </div>
          </div>
        </div>
        <div class="btn-view">
          <div class="btn cancle" @click="openAddWin(false)">取消</div>
          <div class="btn" @click.stop="InsertPropertyBindFun(0, firstData)">
            保存
          </div>
        </div>
      </div>
      <div v-else-if="firstData && firstData.id" class="chid-view">
        <div class="parent-view">
          <div class="top">
            <n-select
              class="select"
              v-model:value="firstData.secondProperty.secondType"
              placeholder="类型"
              :options="secondTypeList"
            />
            <span>排序</span>
            <n-input
              type="text"
              :allow-input="onlyAllowNumber"
              v-model:value="firstData.secondProperty.secondSort"
              placeholder="排序"
            />
            <span>显示</span>
            <n-switch v-model:value="firstData.secondProperty.secondIsVisble" />
            <div class="seting-view">
              <div
                v-if="firstData.secondProperty.secondType"
                class="btn"
                @click="GetPropertyNameFun(firstData.secondProperty.secondType)"
              >
                设置绑定数据
              </div>
            </div>
          </div>
          <div class="sub-title">图片导入<span>建议上传尺寸90*90</span></div>
          <div class="img-upload">
            <div class="img-view">
              <n-upload
                list-type="image-card"
                :custom-request="customRequest"
                accept="image/png, image/jpeg,image/webp"
                :max="1"
              >
                点击上传
              </n-upload>
            </div>
          </div>
        </div>
        <div class="btn-view">
          <div class="btn cancle" @click="openAddWin(false)">取消</div>
          <div class="btn" @click.stop="InsertPropertyBindFun(1, firstData)">
            保存
          </div>
        </div>
      </div>
    </div>
  </model-dialog>
  <!-- 删除弹框 -->
  <n-modal
    :mask-closable="false"
    class="more-dialog"
    v-model:show="openMore"
    preset="dialog"
    :show-icon="false"
    :on-close="closeWin"
    transform-origin="center"
    style="background: #60676c; color: #fff; width: 700px"
  >
    <template #header>
      <div class="title-font">设置绑定数据</div>
    </template>
    <n-scrollbar style="max-height: calc(90vh - 200px)">
      <div class="notice-info">
        <div v-for="item in moreList" :key="item.id" class="type-option">
          <n-checkbox
            size="large"
            v-model:checked="item.checked"
            @update:checked="checkedFun($event, item)"
          >
            {{ item.propertyName }}
          </n-checkbox>
          <div class="check-Box-view" :class="item.checked ? '' : 'disabled'">
            <div
              v-for="el in item.chartType"
              :class="item.active === el ? 'active' : ''"
              :key="el"
              class="btn"
              @click="item.active = el"
            >
              {{ el }}
            </div>
          </div>
        </div>
      </div>
    </n-scrollbar>
    <div class="footer">
      <n-button class="btn" @click="addSecond">保存</n-button>
    </div>
  </n-modal>
  <n-modal
    :mask-closable="false"
    class="del-dialog"
    v-model:show="openDelDialog"
    preset="dialog"
    :show-icon="false"
    :on-close="closeWin"
    transform-origin="center"
    style="background: #60676c; color: #fff; width: 700px"
  >
    <template #header>
      <div class="title-font">删除</div>
    </template>
    <div class="notice-info">确定要删除吗？</div>
    <div class="footer">
      <n-button class="btn btn-border" @click="closeWin">取消</n-button>
      <n-button class="btn btn-bg" @click="deleteFun(false)">删除</n-button>
    </div>
  </n-modal>
</template>

<script lang="ts" setup>
import ModelDialog from "@/components/Dialog/index.vue";
import { computed, onMounted, ref, watch } from "vue";
import { uuid } from "@/tools/radom";
import {
  GetFirstTypeName,
  GetSecondTypeName,
  InsertPropertyBind,
  UploadFile,
  GetFirstType,
  GetSecondType,
  UpdateSecondData,
  UpdateFirstData,
  DeleteSecondData,
  DeleteFirstData,
  GetPropertyName,
} from "@/server";
import { UploadCustomRequestOptions } from "naive-ui";
import { useAppStore } from "@/store/modules/user";
import { mapStore } from "@/store/modules/map";
const store = useAppStore();
const mapData = mapStore();
const firstDefualt = {
  firstType: "",
  firstPicture: "",
  firstSort: 0,
  firstIsVisble: true,
};
const secondDefualt = {
  id: 0,
  firstType: "",
  firstPicture: "",
  firstSort: 0,
  firstIsVisble: true,
  parentId: 0,
  secondProperty: {
    parentId: 0,
    secondType: "",
    secondPicture: "",
    secondSort: 0,
    secondIsVisble: true,
    datas: [],
  },
};
const openMore = ref(false); //更多设置
const editorAddOpen = ref(false); //打开编辑器
const editorOpen = ref(false); //打开编辑器
const firstData = ref(null) as any;
const activeFirstItem = ref(null) as any; //选中一级值
const activeChildId = ref(-1); //选中值
const firstPage = ref(0);
const secondPage = ref(1);
const firstArr = computed(() => mapData.filrstList);
const firstList = ref([]) as any;
watch(
  () => firstPage.value,
  () => {
    firstList.value = JSON.parse(JSON.stringify(firstArr.value))
      .splice((firstPage.value - 1) * 2, 2)
      .map((e: any) => {
        e.firstSort = e.firstSort + "";
        return e;
      });
    if (firstList.value.length > 0) {
      activeItemFun(firstList.value[0]);
    }
  }
);
watch(
  () => secondPage.value,
  () => {
    secondList.value = JSON.parse(JSON.stringify(secondArr.value))
      .splice((secondPage.value - 1) * 2, 2)
      .map((e: any) => {
        e.secondSort = e.secondSort + "";
        e.img = [
          {
            id: "1",
            name: "",
            status: "finished",
            url: e.secondPicture,
          },
        ];
        return e;
      });
  }
);
const secondArr = computed(() => mapData.secondtList);
const secondList = ref([]) as any;
const firstTypeList = ref([]) as any;
const secondTypeList = ref([]) as any;
//删除弹框
const openDelDialog = ref(false);
// 关闭删除
const closeWin = () => {
  openMore.value = false;
  openDelDialog.value = false;
  deleteData.value = null;
};
const customRequest = async ({
  file,
  onFinish,
  onError,
  onProgress,
}: UploadCustomRequestOptions) => {
  const formData = new FormData();
  if (file && file.type) {
    const fileName = file.name;
    const fileExtension = fileName.split(".").pop();
    const randomSuffix = uuid();
    // 构建新文件名
    const newFileName = `${randomSuffix}.${fileExtension}`;
    // 创建一个新的File对象，用新文件名替换原文件名
    formData.append("file", file.file as File, newFileName);
    // 创建一个新Blob对象，将文件内容复制到其中
    onProgress({ percent: 10 });
    const res: any = await UploadFile(formData);
    if (res.result.isSuccess) {
      onProgress({ percent: 100 });
      const imgUrl = res.result.result.fileName; //图片上传的路径
      if (editorAddOpen.value) {
        if (!firstData.value.id) {
          firstData.value.firstPicture = imgUrl;
        } else {
          firstData.value.secondProperty.secondPicture = imgUrl;
        }
      } else {
        const activeIndex = firstList.value.findIndex(
          (e: any) => e.id === activeFirstItem.value.id
        );
        if (activeIndex > -1) {
          console.log(JSON.stringify(firstList.value[activeIndex]));

          firstList.value[activeIndex].firstPicture = imgUrl;
        }
      }
      setTimeout(() => {
        onFinish();
      }, 500);
    } else {
      onError();
      store.error(res.result.message); // 错误提示
    }
  }
};

const customRequest1 = async ({
  file,
  onFinish,
  onError,
  onProgress,
}: UploadCustomRequestOptions) => {
  const formData = new FormData();
  if (file && file.type) {
    const fileName = file.name;
    const fileExtension = fileName.split(".").pop();
    const randomSuffix = uuid();
    // 构建新文件名
    const newFileName = `${randomSuffix}.${fileExtension}`;
    // 创建一个新的File对象，用新文件名替换原文件名
    formData.append("file", file.file as File, newFileName);
    // 创建一个新Blob对象，将文件内容复制到其中
    onProgress({ percent: 10 });
    const res: any = await UploadFile(formData);
    if (res.result.isSuccess) {
      onProgress({ percent: 100 });
      const imgUrl = res.result.result.fileName; //图片上传的路径
      console.log(JSON.stringify(firstData.value));
      // const index = firstData.value.secondProperty.findIndex(
      //   (e: any) => e.id === activeChildId.value
      // );
      firstData.value.secondProperty.secondPicture = imgUrl;
      console.log(JSON.stringify(firstData.value));
      setTimeout(() => {
        onFinish();
      }, 500);
    } else {
      onError();
      store.error(res.result.message); // 错误提示
    }
  }
};
const onlyAllowNumber = (value: string) => {
  return !value || /^\d+$/.test(value);
};
const openedit = (type: boolean) => {
  if (type) {
    firstList.value = JSON.parse(JSON.stringify(firstArr.value))
      .splice((firstPage.value - 1) * 2, 2)
      .map((e: any) => {
        e.firstSort = e.firstSort + "";
        return e;
      });
    if (firstList.value.length > 0) {
      activeItemFun(firstList.value[0]);
    }
  }
  editorOpen.value = type;
};
const checkedFun = (bool: boolean, item: any) => {
  if (bool) {
    item.active = item.chartType[0];
  } else {
    item.active = "";
  }
};
const secondActive = (item: any) => {
  activeChildId.value = item.id;
  firstData.value = JSON.parse(JSON.stringify(secondDefualt));
  firstData.value = Object.assign(firstData.value, activeFirstItem.value);
  firstData.value.secondProperty = item;
};
const openAddWin = (bool: boolean, type?: string) => {
  if (!bool) {
    firstData.value = null;
  } else {
    if (type === "0") {
      firstData.value = JSON.parse(JSON.stringify(firstDefualt));
      firstData.value.firstSort = firstArr.value.length;
    } else {
      firstData.value = JSON.parse(JSON.stringify(secondDefualt));
      firstData.value = Object.assign(firstData.value, activeFirstItem.value);
      firstData.value.secondProperty.secondSort = secondArr.value.length + "";
    }
  }
  editorAddOpen.value = bool;
};
const activeItemFun = (item: any) => {
  if (activeFirstItem.value && activeFirstItem.value.id === item.id) {
    return false;
  }
  activeFirstItem.value = item;
  GetSecondTypeNameFun(item);
  GetSecondTypeFun(item.id);
};
//获取二级工具类型列表
const GetSecondTypeNameFun = async (item: any) => {
  const res: any = await GetSecondTypeName({ firstType: item.firstType });
  if (res.result.isSuccess) {
    secondTypeList.value = res.result.result.map((e: any) => {
      return { value: e, label: e };
    });
  } else {
    store.error(res.result.message); // 错误提示
  }
};
//获取一级工具类型列表
const GetFirstTypeNameFun = async () => {
  const res: any = await GetFirstTypeName({ url: "" });
  if (res.result.isSuccess) {
    firstTypeList.value = res.result.result.map((e: any) => {
      return { value: e, label: e };
    });
  } else {
    store.error(res.result.message); // 错误提示
  }
};
const InsertPropertyBindFun = async (type: number, data: any) => {
  const { firstType, firstPicture, secondProperty } = data;
  if (!firstType) {
    store.error("请选择工具类型1"); // 错误提示
    return false;
  }
  if (!firstPicture) {
    store.error("请上传矢量图标"); // 错误提示
    return false;
  }
  const params = JSON.parse(JSON.stringify(data));
  if (type === 0) {
    delete params.secondProperty;
  } else {
    if (!secondProperty.secondType) {
      store.error("请选择工具类型2"); // 错误提示
      return false;
    }
    if (!secondProperty.secondPicture) {
      store.error("请上传矢量图标"); // 错误提示
      return false;
    }
    // if (secondProperty.datas.length===0) {
    //   store.error("请上传矢量图标"); // 错误提示
    //   return false;
    // }
  }
  // UpdateSecondData,
  // UpdateFirstData,
  let res: any = null;
  if (type === 0 && params.id) {
    res = await UpdateFirstData(params);
  } else if (type === 1 && params.secondProperty.id) {
    res = await UpdateSecondData(params.secondProperty);
  } else {
    res = await InsertPropertyBind(params);
  }
  if (res.result.isSuccess) {
    store.success(res.result.message); // 错误提示
    type === 0
      ? GetFirstTypeFun(true)
      : GetSecondTypeFun(activeFirstItem.value.id, true);
    openAddWin(false);
  } else {
    store.error(res.result.message); // 错误提示
  }
};
//获取一级菜单
const GetFirstTypeFun = async (type?: boolean) => {
  const res: any = await GetFirstType({ pageNumber: 1, pageSize: 1000 });
  if (res.result.isSuccess) {
    if (type) {
      mapData.setFirstData(res.result.result);
    }
    firstList.value = res.result.result
      .splice((firstPage.value - 1) * 2, 2)
      .map((e: any) => {
        e.firstSort = e.firstSort + "";
        return e;
      });
    if (firstList.value.length > 0) {
      activeItemFun(firstList.value[0]);
      GetSecondTypeFun(firstList.value[0].id, true);
    }
  } else {
    store.error(res.result.message); // 错误提示
  }
};
//获取二级菜单
const GetSecondTypeFun = async (parentId: number, type?: boolean) => {
  const res: any = await GetSecondType({
    parentId: parentId,
    pageNumber: 1,
    pageSize: 1000,
  });
  if (res.result.isSuccess) {
    if (type) {
      mapData.setSecondData(res.result.result);
    }
    secondList.value = res.result.result
      .splice((secondPage.value - 1) * 2, 2)
      .map((e: any) => {
        e.secondSort = e.secondSort + "";
        e.img = [
          {
            id: "1",
            name: "",
            status: "finished",
            url: e.secondPicture,
          },
        ];
        return e;
      });
  } else {
    store.error(res.result.message); // 错误提示
  }
};
const deleteData = ref(null) as any;
const deleteFun = (show: boolean, type?: number, id?: number) => {
  if (show) {
    deleteData.value = { type, id };
  } else if (deleteData.value.type === 0) {
    DeleteFirstDataFun(deleteData.value.id);
  } else if (deleteData.value.type === 1) {
    DeleteSecondDataFun(deleteData.value.id);
  }
  openDelDialog.value = show;
};
//删除一级菜单
const DeleteFirstDataFun = async (id: number) => {
  const res: any = await DeleteFirstData({ id: id });
  if (res.result.isSuccess) {
    store.success(res.result.message); // 错误提示
    GetFirstTypeFun(true);
    mapData.setSecondData([]);
    secondList.value = []; //清空二级菜单
    firstPage.value = 1;
  } else {
    store.error(res.result.message); // 错误提示
  }
};
//删除二级菜单
const DeleteSecondDataFun = async (id: number) => {
  const res: any = await DeleteSecondData({ id: id });
  if (res.result.isSuccess) {
    store.success(res.result.message); // 错误提示
    secondPage.value = 1;
    GetSecondTypeFun(activeFirstItem.value.id, true);
  } else {
    store.error(res.result.message); // 错误提示
  }
};
const moreList = ref([]) as any;
//获取更多配置信息
const GetPropertyNameFun = async (secondType: string) => {
  const res: any = await GetPropertyName({
    firstType: activeFirstItem.value.firstType,
    secondType: secondType,
  });
  if (res.result.isSuccess) {
    moreList.value = res.result.result.map((e: any) => {
      const list = firstData.value.secondProperty.datas;
      const data = list.find((m: any) => m.propertyName === e.propertyName);
      if (data) {
        e.checked = true;
        e.active = data.chartType;
      } else {
        e.checked = false;
        e.active = "";
      }
      return e;
    });
    openMore.value = true;
  } else {
    store.error(res.result.message); // 错误提示
  }
};
const addSecond = () => {
  const list = moreList.value
    .filter((e: any) => e.checked)
    .map((e: any) => {
      return {
        propertyName: e.propertyName,
        chartType: e.active,
      };
    });
  firstData.value.secondProperty.datas = list;
  openMore.value = false;
};
defineExpose({ openedit });
onMounted(() => {
  GetFirstTypeNameFun();
  setTimeout(() => {
    firstPage.value = 1;
  }, 500);
});
</script>

<style lang="less" scoped>
.editor-pop-view {
  padding: 4px;
  &.min {
    max-height: 280px !important;
  }

  display: flex;
  justify-content: space-between;
  height: 90vh;
  max-height: 760px;

  .chid-view {
    width: 100%;
    .title {
      text-align: center;
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #01c0e4;
      line-height: 22px;
      margin-bottom: 36px;
    }

    .pages-view {
      display: flex;
      justify-content: center;

      :deep(.n-pagination-item) {
        background: #ffffff;

        &.n-pagination-item--active {
          background: #01c0e4;
          color: #ffffff;
        }
      }
    }

    .parent-view {
      position: relative;
      width: 580px;
      min-height: 200px;
      margin-bottom: 16px;
      background: #1c262d;
      padding: 13px 11px;

      .border-view {
        &.active {
          opacity: 1;
        }

        pointer-events: none;
        transition: opacity 0.3s;
        opacity: 0;
        position: absolute;
        top: -4px;
        left: -4px;
        width: 588px;
        height: 100%;
        border: 4px solid #d8d8d8;
      }

      .right-icon {
        &.active {
          opacity: 1;
        }

        transition: opacity 0.3s;
        opacity: 0;
        position: absolute;
        width: 70px;
        height: 70px;
        right: -69px;
        top: 65px;
      }

      .add-view {
        width: 100%;
        height: 100%;
        min-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;

        .add-icon {
          width: 90px;
          height: 90px;
        }
      }

      .top {
        display: flex;
        align-items: center;

        .type-view {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 22px;
          width: 170px;
          height: 32px;
          padding: 3px 5px;
          border: 1px solid #83898d;
        }

        .seting-view {
          flex: 1;
          display: flex;
          justify-content: flex-end;

          .btn {
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 122px;
            height: 24px;
            background: #02a8ae;
            box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08),
              0px 1px 3px 0px rgba(25, 15, 15, 0.07),
              0px 3px 5px 0px rgba(0, 0, 0, 0.05);
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 22px;
          }
        }

        .select {
          width: 170px;
          height: 32px;

          :deep(.n-base-selection-input__content) {
            color: #ffffff !important;
          }

          :deep(.n-base-selection-label) {
            background: none;
          }
        }

        span {
          padding: 0 20px;
          font-size: 16px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 22px;
        }

        :deep(.n-input) {
          width: 45px;
          background: none;

          input {
            text-align: center;
            font-size: 14px;
            color: #ffffff;
          }
        }
      }

      .sub-title {
        margin: 15px 0;
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 22px;

        span {
          font-size: 12px;
          font-weight: 400;
          color: #d8d8d8;
          line-height: 17px;
          margin-left: 10px;
        }
      }

      .img-upload {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .img-view {
          width: 90px;
          height: 90px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px dashed #83898d;

          .n-upload {
            width: 76px;
            height: 76px;

            :deep(.n-upload-trigger--image-card) {
              width: 76px;
              height: 76px;

              .n-upload-dragger {
                background: none;
              }
            }

            :deep(.n-upload-file) {
              width: 76px;
              height: 76px;
            }
          }
        }

        .tools-view {
          .btn {
            &.delete {
              background: #ee2908;
            }

            &.edit {
              background: #01c0e4;
            }

            height: 24px;
            margin-left: 12px;
          }
        }
      }
    }
  }
}

.btn-view {
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;

    &.cancle {
      background: #ffffff;
      color: #000000;
    }

    width: 100px;
    height: 36px;
    background: #01c0e4;
    color: #ffffff;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08),
      0px 2px 5px 0px rgba(25, 15, 15, 0.07),
      0px 5px 8px 0px rgba(0, 0, 0, 0.05);
  }
}

.del-dialog {
  // width: 700px;
  .title-font {
    font-size: 24px;
    color: #02a8ae;
  }

  .notice-info {
    display: flex;
    justify-content: center;
    font-size: 24px;
    margin: 60px 0;
  }

  .footer {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;

    .btn {
      width: 100px;
      height: 36px;
      font-size: 18px;
      color: #fff;
      margin-right: 30px;
    }

    .btn-border {
      border: 1px solid #fff;
    }

    .btn-bg {
      background: #ee2908;
    }
  }
}
.more-dialog {
  .title-font {
    font-size: 24px;
    color: #02a8ae;
  }

  .notice-info {
    font-size: 24px;
    margin: 60px 0;

    .type-option {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      :deep(.n-checkbox__label) {
        color: #ffffff;
      }

      .check-Box-view {
        display: flex;
        width: 50%;
        padding: 2px;

        &.disabled {
          pointer-events: none;
          opacity: 0.3;
        }

        .btn {
          &:hover {
            background: #02a8ae;
          }

          &.active {
            background: #01c0e4;
          }

          cursor: pointer;
          flex: 1;
          font-size: 14px;
          /* background: #f5f5f5; */
          color: #ffffff;
          margin-right: 5px;
          display: flex;
          justify-content: center;
          padding: 5px;
          border: 1px solid #838383;
          box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08),
            0px 2px 5px 0px rgba(25, 15, 15, 0.07),
            0px 5px 8px 0px rgba(0, 0, 0, 0.05);
        }
      }
    }
  }

  .footer {
    margin-top: 10px;
    display: flex;
    justify-content: center;

    .btn {
      width: 100px;
      height: 36px;
      font-size: 18px;
      color: #fff;
      background: #02a8ae;
    }
  }
}
</style>
